<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>筋斗云</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			li {
				list-style: none;
			}
			.box {
				
				/*display: flex;
				flex-direction: row;
				justify-content: space-between;*/
				position: relative;
				width: 800px;
				height: 42px;
				line-height: 42px;
				background-color: #fff;
			}
			.box ul {
				position: absolute;
				top: 0;
				left: 0;
				width: 750px;
				height: 42px;
				/*background-color: purple*/
			}
			.box ul li {
				float: left;
				width: 150px;
				height: 100%;
				line-height: 42px;
				text-align: center;
				/*background-color: pink;*/
				cursor:pointer;
			}
			.box .wifi {
				float: right;
				width: 32px;
				height: 32px;
				margin-top: 5px;
			}
			.box .wifi img {
				width: 100%;
				height: 100%;
			}
			.cloud {
				position: absolute;
				top: 0;
				left: 0;
				width: 150px;
				height: 42px;
			}
			.cloud img {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="cloud">
				<img src="img/cloud.gif"/>
			</div>
			<ul>
				<li>首页新闻</li>
				<li>师资力量</li>
				<li>活动策划</li>
				<li>企业文化</li>
				<li>招聘信息</li>
			</ul>
			<div class="wifi">
				<img src="img/rss.png"/>
			</div>
		</div>
		
		<script type="text/javascript">
			var cloud = document.querySelector('.cloud');
			var lis = document.querySelectorAll('ul li');
			
			
			//记录当前li的offsetLeft的值,给cloud当起始位置用
			var current = 0;
			//遍历lis，绑定事件
			for(var i = 0; i < lis.length; i++) {
				lis[i].addEventListener('mouseenter',function() {
					animate(cloud,this.offsetLeft);
				});
				lis[i].addEventListener('mouseleave',function() {
					//鼠标离开的时候，云朵返回最初位置
					animate(cloud,current)
				})
				//当鼠标点击的时候，记录当前的li的oofsetLeft的值,给cloud当起始位置
				lis[i].addEventListener('click',function() {
					current = this.offsetLeft;
				})
			}
			
			//动画函数
			function animate(obj,target,callback) {
				//清除其他定时器,只保留当前的定时器
				clearInterval(obj.timer)
				obj.timer = setInterval(function() {
					//计算步长
					var step = (target - obj.offsetLeft) / 10;
					step = step > 0 ? Math.ceil(step) : Math.floor(step);
					if(obj.offsetLeft == target) {
						//清除定时器
						clearInterval(obj.timer);
						//调用回调函数
						callback && callback();
					}
					obj.style.left = obj.offsetLeft + step + 'px';
				},15)
			}
		</script>
	</body>
</html>
